<template>
  <!--
    作者：su  
    时间：2023-07-05
    描述：添加货运信息
  -->
  <div class="product-add">
    <div class="common-form">商品信息</div>
    <el-form size="small" ref="form" label-width="80px" v-if="!loading">
      <el-form-item label="商品名称">
        <p class="fb">{{ detail.assembleProduct.product_name }}</p>
      </el-form-item>
      <el-form-item label="商品规格">
        <p class="fb">{{ detail.assembleSku.product_attr }}</p>
      </el-form-item>
      <el-form-item label="商品图片"><img :src="detail.assembleSku.product_cover" width="80" /></el-form-item>
      <el-form-item label="商品价格">
        <p class="fb">￥{{ detail.assembleSku.assemble_price }}</p>
      </el-form-item>
      <!--提交-->
    </el-form>
    <div class="common-form">自提信息</div>
    <el-form size="small" ref="form" label-width="80px" v-if="!loading">
      <el-form-item label="自提点">
        <p class="fb">{{ detail.store.store_name }}</p>
      </el-form-item>
      <el-form-item label="配送地址">
        <p class="fb">{{ detail.store.address }}</p>
      </el-form-item>
      <el-form-item label="联系人">
        <p class="fb">{{ detail.store.linkman }}</p>
      </el-form-item>
      <el-form-item label="联系电话">
        <p class="fb">{{ detail.store.phone }}</p>
      </el-form-item>
      
      <!--提交-->
    </el-form>
    <div class="common-form">拼团信息</div>
    <el-form size="small" ref="form" label-width="100px" v-if="!loading">
      <el-form-item label="拼团人数">
        <p class="fb">{{ detail.actual_people }}</p>
      </el-form-item>
      <el-form-item label="拼团人次">
        <p class="fb">{{ detail.actual_num }}</p>
      </el-form-item>
      <el-form-item label="已拼金额">
        <p class="fb">{{ detail.actual_amount }}</p>
      </el-form-item>
      <el-form-item label="总需拼团人次">
        <p class="fb">{{ detail.total_num }}</p>
      </el-form-item>
      <el-form-item label="总需拼团金额">
        <p class="fb">{{ detail.total_amount }}</p>
      </el-form-item>
      <el-form-item label="拼团状态">
        <p class="fb">{{ detail.status_text }}</p>
      </el-form-item>
      <!--提交-->
    </el-form>
    <div class="common-form">货运信息</div>
    <el-form size="small" ref="form" label-width="80px" v-if="!loading">
      <el-form-item label="司机姓名">
        <p class="fb">{{ detail.driver_realname }}</p>
      </el-form-item>
      <el-form-item label="司机手机">
        <p class="fb">{{ detail.driver_mobile }}</p>
      </el-form-item>
      <el-form-item label="车牌号码">
        <p class="fb">{{ detail.lisence_number }}</p>
      </el-form-item>
      <el-form-item label="发车时间">
        <p class="fb">{{ detail.departure_time }}</p>
      </el-form-item>
    </el-form>
    
      <div class="common-form">货物到站</div>
    <el-form size="small" ref="form" label-width="80px" v-if="!loading">
      <template>
        <div>
          <el-form-item  label="车辆照片">
            <div class="image-container">
              <ImagePreview :src="image" v-for="(image, index) in detail.bus_image_arr" :key="index"  width="100px" height="100px" />
            </div>
          </el-form-item>
          <el-form-item label="货物照片">
            <div class="image-container">
              <ImagePreview :src="image"  v-for="(image, index) in detail.goods_image_arr" :key="index" width="100px" height="100px"  />
            </div>
          </el-form-item>
          <el-form-item label="到货情况">
            <p class="fb" style="color: red;">{{ detail.check_desc }}</p>
          </el-form-item>
        </div>
      </template>
      
    </el-form>
    <div class="common-form">配送信息</div>
    <el-form size="small" ref="form" label-width="80px" v-if="!loading">
      <el-form-item label="完成时间">
        <p class="fb">{{ detail.receipt_time }}</p>
      </el-form-item>
      <el-form-item label="配送状态">
        <p class="fb">{{ detail.delivery_status }}</p>
      </el-form-item>
      <!--提交-->
    </el-form>
    <div class="common-form">结算信息</div>
    <el-form size="small" ref="form" label-width="80px" v-if="!loading">
      <el-form-item label="平台金额">
        <p class="fb">{{ detail.plat_amount }}</p>
      </el-form-item>
      <el-form-item label="供货商金额">
        <p class="fb">{{ detail.supply_actual_amount }}</p>
      </el-form-item>
      <el-form-item label="站点金额">
        <p class="fb">{{ detail.store_amount }}</p>
      </el-form-item>
      <el-form-item label="结算状态">
        <p class="fb">{{ detail.settle_status==0?'未结算':'已结算' }}</p>
      </el-form-item>
      <!--提交-->
    </el-form>
    <div class="common-button-wrapper">
      <el-button size="small" type="info" @click="cancel">返回</el-button>
    </div>
  </div>
</template>
<script>
import ImagePreview from '@/components/ImagePreview/index';
import AssembleApi from '@/api/assemble';
import { formatModel } from '@/utils/base.js';
export default {
  components: {
    ImagePreview
  },
  data() {
    return {
      /*是否正在加载*/
      loading: false,
      assemble_bill_id:'',
      detail:{

      }
    };
  },
  mounted(){
    this.assemble_bill_id = this.$route.query.assemble_bill_id;
    this.getData();
  },
  methods: {
    /*获取商品*/
    getData() {
      let self = this;
      AssembleApi.detailBill(
        {
          bill_id: self.assemble_bill_id
        },
        true
      ).then(res => {
        self.detail = res.data.model;
        self.loading = false;
      });
    },
    //取消
    cancel(){
      this.$router.back(-1);
    }
  }
};
</script>
<style>
.edit_container {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.product-add {
  padding-bottom: 100px;
}
.image-container {
  display: flex; /* 使用flex布局 */
  flex-wrap: wrap; /* 允许项目换行 */
  
}

.image-container img {
  margin: 5px; /* 图片之间的间距 */
}
</style>
